<template>
  <div class="JDBOX">
    <el-button type="primary"   style="margin-bottom: 10px;" @click="dialogVisible=true">添加</el-button>
    <el-table :data="tableData" border  style="width: 100%">
      <el-table-column align="center" min-width="100px" prop="authName" :label="$t('public.Platform_name')" >
      </el-table-column>
        <el-table-column align="center" min-width="180px" prop="expiresTime" :label="$t('public.expiring_date')" >
        </el-table-column>
        <el-table-column align="center" min-width="200px" prop="accessToken" label="accessToken" >
        </el-table-column>
        <el-table-column align="center" min-width="150px" prop="deptNo" label="事业部编码" >
        </el-table-column>
        <el-table-column align="center" min-width="150px" prop="deptNo" label="发货模式" >
          <template slot-scope="{row}">
              <span v-if="row.pattern=='beihuo'">备货</span>
              <span v-if="row.pattern=='zhiyou'">直邮</span>
              <span v-if="row.pattern=='jihuo'">集货</span>
              <span v-if="row.pattern=='grkuaijian'">个人快件</span>
              <span v-if="row.pattern=='youzheng'">邮政</span>
          </template>
        </el-table-column>

        <el-table-column  min-width="200px" fixed="right" align="center" prop="date" :label="$t('public.operate')" >
          <template slot-scope="{row}">
            <el-button v-if="row.serverType==3" @click="getInfo_item(row)" type="text" size="small">{{$t('public.edit')}}</el-button>
            <el-button v-if="row.id==2" @click="getJdOpencode()" type="text" size="small">{{$t('public.Logistics_open_platform_authorization')}}</el-button>
            <el-button v-if="row.serverType==3" @click="getcode(row)" type="text" size="small"> {{$t('public.Merchant_authorized_login')}}</el-button>
            <el-button v-if="row.id==1" @click="getcodeFw()" type="text" size="small">{{$t('public.Vendor_authorized_login')}}</el-button>
            <el-button v-if="(row.serverType==3 || row.serverType==2)  && row.accessToken" @click="updateBusinessConfig(row.id)" type="text" size="small">{{$t('public.refreshToken')}}</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog :title="form_disable?'编辑':'添加'" :visible.sync="dialogVisible" width="70%" :before-close="handleClose">
          <el-form :disabled="form_disable" v-if="dialogVisible" :model="addForm" :rules="rules" ref="addForm" label-width="180px" class="demo-ruleForm">
            <div style="display: flex;width:100%;">
              <div style="width:50%;">
                <el-form-item label="授权名称" prop="authName">
                  <el-input show-word-limit maxlength="30" text v-model="addForm.authName"></el-input>
                </el-form-item>
                <el-form-item label="appKey" prop="appKey">
                  <el-input show-word-limit maxlength="50" text v-model="addForm.appKey"></el-input>
                </el-form-item>
                <el-form-item label="appSecret" prop="appSecret">
                  <el-input show-word-limit maxlength="50" text v-model="addForm.appSecret"></el-input>
                </el-form-item>
                <el-form-item label="ISV来源编号" prop="isvCode">
                  <el-input show-word-limit maxlength="30" text v-model="addForm.isvCode"></el-input>
                </el-form-item>
                <el-form-item label="平台ID" prop="platFormId">
                  <el-input show-word-limit maxlength="30" text v-model="addForm.platFormId"></el-input>
                </el-form-item>
                <el-form-item label="平台名称" prop="platFormName">
                  <el-input show-word-limit maxlength="30" text v-model="addForm.platFormName"></el-input>
                </el-form-item>
                <el-form-item label="事业部编号" prop="deptNo">
                  <el-input show-word-limit maxlength="30" text v-model="addForm.deptNo"></el-input>
                </el-form-item>
                <el-form-item label="商家编码" prop="customerCode">
                  <el-input show-word-limit maxlength="30" text v-model="addForm.customerCode"></el-input>
                </el-form-item>
              </div>
              <div style="width:50%;">
                <el-form-item label="京东口岸名称" prop="customerId">
                  <el-input show-word-limit maxlength="30" text v-model="addForm.customerId"></el-input>
                </el-form-item>
                <el-form-item label="电商企业名称" prop="ebcName">
                  <el-input show-word-limit maxlength="50" text v-model="addForm.ebcName"></el-input>
                </el-form-item>
                <el-form-item label="电商企业代码" prop="ebcCode">
                  <el-input show-word-limit maxlength="30" text v-model="addForm.ebcCode"></el-input>
                </el-form-item>
                <el-form-item label="物流企业名称" prop="logisticsName">
                  <el-input show-word-limit maxlength="30" text v-model="addForm.logisticsName"></el-input>
                </el-form-item>
                <el-form-item label="物流企业代码" prop="logisticsCode">
                  <el-input show-word-limit maxlength="30" text v-model="addForm.logisticsCode"></el-input>
                </el-form-item>
                <el-form-item label="发货模式" prop="pattern">
                  <!-- <el-input show-word-limit maxlength="20" text v-model="addForm.pattern"></el-input> -->
                  <el-select style="width: 100%;" v-model="addForm.pattern" placeholder="请选择">
                      <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                </el-form-item>
                <!-- <el-form-item label="店铺编码" prop="pattern">
                  <el-input show-word-limit maxlength="20" text v-model="addForm.shopCode"></el-input>
                </el-form-item> -->
              </div>
            </div>
            <el-form-item >
              <div style="display: flex;justify-content: flex-end;width:100%;">
                <el-button @click="handleClose">{{$t('public.cancellation')}}</el-button>
                <el-button @click="submitForm('addForm')" type="primary" >{{$t('public.determine')}}</el-button>
              </div>
            </el-form-item>
          </el-form>
      </el-dialog>
  </div>

</template>
<!-- 1服务商 2物流开放平台 3 商家 -->
<script>
  import {
    configList,
    getAccessToken,
    getBusinessAccessToken,
    getServiceAccessToken,
    updateBusinessConfig,
    updateConfig,
    config_save,
    config_info,
    config_update
  } from '@/api/wqzApi'
  import store from '@/store'
  import axios from 'axios'
  export default {
    components: {

      },
    data() {
      return {
        tableData:[
          {}
        ],
        options:[
          {label:'备货',value:'beihuo'},
          {label:'直邮',value:'zhiyou'},
          {label:'集货',value:'jihuo'},
          {label:'个人快件',value:'grkuaijian'},
          {label:'邮政',value:'youzheng'},
        ],
        form_disable:false,
        addForm:{
          authName:null , // 授权名称
          appKey:null , // appKey
          appSecret:null , // appSecret
          isvCode:null , // ISV来源编号
          platFormId:null , // 平台ID
          platFormName:null , // 平台名称
          deptNo:null , // 事业部编号
          customerCode:null , // 商家编码
          customerId:null , // 京东口岸名称
          ebcName:null , // 电商企业名称
          ebcCode:null , // 电商企业代码
          logisticsName:null , // 物理企业名称
          logisticsCode:null , // 物理企业代码
          pattern:null , // 发货模式
          shopCode:null , // 店铺编码
          // authName:'UD' , // 授权名称
          // appKey:'50AF70A9942E7FABE55FD4A654B493C9' , // appKey
          // appSecret:'89afc495d3604c44919411045476f927' , // appSecret
          // isvCode:'ISV0020008046333' , // ISV来源编号
          // platFormId:'8041099' , // 平台ID
          // platFormName:'UDGLOBAL纯配' , // 平台名称
          // deptNo:'EBU4418055192964' , // 事业部编号
          // customerCode:'010K3490942' , // 商家编码
          // customerId:'dalian' , // 京东口岸名称
          // ebcName:'电商企业名称    艾恩锋（厦门）跨境电子商务有限公司' , // 电商企业名称
          // ebcCode:'3502149CM5' , // 电商企业代码
          // logisticsName:'北京京邦达贸易有限公司' , // 物理企业名称
          // logisticsCode:'CYS0000010' , // 物理企业代码
          // pattern:'beihuo' , // 发货模式
          // shopCode:null , // 店铺编码
        },
        dialogVisible:false,//添加对话框
        rules:{
           authName: [{ required: true, message: '请输入', trigger: 'blur' }],
           appKey: [{ required: true, message: '请输入', trigger: 'blur' }],
           appSecret: [{ required: true, message: '请输入', trigger: 'blur' }],
           isvCode: [{ required: true, message: '请输入', trigger: 'blur' }],
           platFormId: [{ required: true, message: '请输入', trigger: 'blur' }],
           platFormName: [{ required: true, message: '请输入', trigger: 'blur' }],
           deptNo: [{ required: true, message: '请输入', trigger: 'blur' }],
           customerCode: [{ required: true, message: '请输入', trigger: 'blur' }],
           customerId: [{ required: true, message: '请输入', trigger: 'blur' }],
           ebcName: [{ required: true, message: '请输入', trigger: 'blur' }],
           ebcCode: [{ required: true, message: '请输入', trigger: 'blur' }],
           logisticsName: [{ required: true, message: '请输入', trigger: 'blur' }],
           logisticsCode: [{ required: true, message: '请输入', trigger: 'blur' }],
           pattern: [{ required: true, message: '请选择', trigger: 'blur' }],
           shopCode: [{ required: true, message: '请输入', trigger: 'blur' }],
        },//表单验证
      }
    },

    created() {
      // 1和3可以刷新
      var params = this.$getUrlParams()
      if(params.code){
        var formdata = new FormData()
        formdata.append('code' , params.code)
        if(params.type == 1){
          // 1服务商
          getServiceAccessToken(formdata).then(res=>{
            console.log(res , '服务商平台返回信息')
          })
        }
        if(params.type == 2){
          // 2物流开放平台
          getAccessToken(formdata).then(res=>{
            console.log(res , '物流开放平台返回信息')
          })
        }
        if(params.type == 3){
          // 商家
          getBusinessAccessToken(formdata).then(res=>{
            console.log(res , '商家绑定code返回信息')
          })
        }
      }
      this.getList()
    },

    methods: {
      getInfo_item(row){
        // 获取详情
          config_info({id:row.id}).then(res=>{
            this.addForm = res.sysConfig
            if(this.addForm.accessToken == '' || this.addForm.accessToken== null ){
              this.form_disable = false
            }else{
              this.form_disable = true
            }
            this.dialogVisible = true
          })
      },
      handleClose(){
        for(var key in this.addForm){
          this.addForm[key] = null
        }
        this.dialogVisible = false
        this.form_disable = false
      },
      submitForm(ref){
        this.$refs[ref].validate((valid) => {
          if (valid) {
            if(this.addForm.id){
              // 编辑
              config_update(this.addForm).then(res=>{
                this.$message({
                  type:'success',
                  message:'操作成功'
                })
                this.dialogVisible = false
                this.getList()
              })
            }else{
              // 新增
              console.log('这里是新增')
              config_save(this.addForm).then(res=>{
                this.$message({
                  type:'success',
                  message:'操作成功'
                })
                this.dialogVisible = false
                this.getList()
              })
            }

          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      getList(){
        configList().then(res=>{
        this.tableData = res.list
      })
      },
      updateBusinessConfig(id){
        var formdata = new FormData()
        formdata.append('id' , id)
        updateConfig(formdata).then(res=>{
          this.$message({
            type:'success',
            message:this.$t('public.Operation_successful')
          })
          this.getList()
        })
      },
      getJdOpencode(){
        // 物流开放平台
        var appKye = process.env.VUE_APP_BASE_WULIU
        // var redirect_url = process.env.VUE_APP_BASE_REDIRECT
        var redirect_url = 'http://jdldcs.com'+'?type=2&s=1#/'
        var url =`https://oauth.jdl.com/oauth/authorize?client_id=${appKye}&redirect_uri=${redirect_url}&response_type=code`
         // https://oauth.jdl.com/oauth/authorize?client_id=${appKye}&redirect_uri=${redirect_url}&response_type=code
        window.location.href = url
      },
      getcode(row){
        // 商家
        localStorage.setItem("shop_id",row.id);
        var appKye = row.appKey
        var Host_url = window.location.host
        var redirect_url = `http://${Host_url}`
        var url =`
          https://open-oauth.jd.com/oauth2/to_login?app_key=${appKye}&response_type=code&redirect_uri=${redirect_url}&state=3&scope=snsapi_base
        `
        // https://open-oauth.jd.com/oauth2/to_login?app_key=DC193D5743348E6E1486F93210642647&response_type=code&redirect_uri=http://localhost:9527/#/&state=1231132132132132&scope=snsapi_base
        window.location.href = url
      },
      getcodeFw(){
        // 服务商
        // <!-- 1服务商 2物流开放平台 3 商家 -->
        var appKye = process.env.VUE_APP_BASE_FUWUSHANG
        // var redirect_url = process.env.VUE_APP_BASE_REDIRECT
        var redirect_url = 'http://jdldcs.com'
        var url =`
          https://open-oauth.jd.com/oauth2/to_login?app_key=${appKye}&response_type=code&redirect_uri=${redirect_url}&state=1&scope=snsapi_base
        `
        window.location.href = url
      }
    }
  }
</script>

<style lang="scss" scoped>
  .JDBOX{
    width: 100%;
    padding: 1%;
  }
</style>
